<template>
  <div class="video-example">
    <h2>视频资源示例</h2>
    
    <!-- 视频播放器 -->
    <div class="video-player-container">
      <video 
        ref="videoPlayer"
        :src="videoSource"
        controls 
        class="video-player"
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
      >
        您的浏览器不支持视频播放。
      </video>
      
      <div class="video-controls">
        <button @click="togglePlayPause" class="control-btn">
          {{ isPlaying ? '⏸️ 暂停' : '▶️ 播放' }}
        </button>
        <button @click="stopVideo" class="control-btn">⏹️ 停止</button>
        <button @click="toggleMute" class="control-btn">
          {{ isMuted ? '🔊 取消静音' : '🔇 静音' }}
        </button>
      </div>
    </div>
    
    <!-- 视频信息 -->
    <div class="video-info">
      <h3>视频信息</h3>
      <p><strong>文件名：</strong>baowei.mp4</p>
      <p><strong>路径：</strong>src/assets/videos/baowei.mp4</p>
      <p><strong>状态：</strong>{{ playbackStatus }}</p>
    </div>
    
    <!-- 使用说明 -->
    <div class="instructions">
      <h3>如何使用视频资源</h3>
      <ol>
        <li>将视频文件放入 <code>src/assets/videos</code> 目录</li>
        <li>在组件中导入视频文件：</li>
        <pre><code>// 导入视频资源
import myVideo from '@/assets/videos/my-video.mp4'</code></pre>
        <li>在模板中使用：</li>
        <pre><code>&lt;video :src="myVideo" controls&gt;</audio></code></pre>
      </ol>
    </div>
  </div>
</template>

<script>
// 导入视频资源
import baoweiVideo from '@/assets/videos/baowei.mp4'

export default {
  name: 'VideoExample',
  data() {
    return {
      videoSource: baoweiVideo,
      isPlaying: false,
      isMuted: false,
      playbackStatus: '已停止'
    }
  },
  methods: {
    // 切换播放/暂停
    togglePlayPause() {
      const video = this.$refs.videoPlayer
      if (video) {
        if (this.isPlaying) {
          video.pause()
        } else {
          video.play()
        }
      }
    },
    
    // 停止视频
    stopVideo() {
      const video = this.$refs.videoPlayer
      if (video) {
        video.pause()
        video.currentTime = 0
        this.isPlaying = false
        this.playbackStatus = '已停止'
      }
    },
    
    // 切换静音
    toggleMute() {
      const video = this.$refs.videoPlayer
      if (video) {
        video.muted = !video.muted
        this.isMuted = video.muted
      }
    },
    
    // 播放事件处理
    onPlay() {
      this.isPlaying = true
      this.playbackStatus = '播放中'
    },
    
    // 暂停事件处理
    onPause() {
      this.isPlaying = false
      this.playbackStatus = '已暂停'
    },
    
    // 结束事件处理
    onEnded() {
      this.isPlaying = false
      this.playbackStatus = '播放结束'
    }
  }
}
</script>

<style scoped>
.video-example {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

h2 {
  color: #4CAF50;
  text-align: center;
  margin-bottom: 30px;
}

.video-player-container {
  margin-bottom: 30px;
  text-align: center;
}

.video-player {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.control-btn {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #45a049;
}

.video-info,
.instructions {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
}

pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', Courier, monospace;
  color: #d63384;
}

ol {
  text-align: left;
  line-height: 1.6;
}

li {
  margin-bottom: 10px;
}
</style>